<template>
  <div class="userspace-models-container">
    <div class="userspace-models-registration">
      <div class="model_research">
        <input
          type="text"
          autocomplete="false"
          placeholder="请输入内容"
          class="model_research_input"
          v-model="input"
          style="font-size: 16px"
        />
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <el-button type="primary" @click="modelRegister"> 模型注册 </el-button>
    </div>
    <div class="userspace-models-cards">
      <div class="models-card" v-for="(model, index) in modelList" :key="index">
        <div class="models-card-title">
          <h1>{{ model.name }}</h1>
          <i
            v-if="model.modelOpenness == 'Public'"
            class="fa-solid fa-lock-open"
          >
          </i>
          <i v-else class="fa-solid fa-lock"></i>
        </div>
        <div class="models-card-content">
          <div class="img-box">
            <img :src="model.img" alt="" />
          </div>
          <div class="des-box" :id="index" @click="readmore(index)">
            <p>
              {{ model.description }}
            </p>
          </div>
        </div>
        <div class="models-card-activateInfo">
          <h3>
            注册日期：<span>{{ model.registerDate }}</span>
          </h3>
          <div class="operator-group">
            <div class="operator">
              <i class="fa-solid fa-pen-to-square"></i>
              <span>编辑</span>
            </div>
            <div class="operator">
              <i class="fa-solid fa-trash-can"></i>
              <span>注销</span>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showRegistionCard" class="modelRegistionCard">
        <div class="RegistionCard-item">
          <div class="title">
            <i class="fa-solid fa-code-merge"></i>
            <span>接口注册</span>
          </div>
          <div class="content" v-show="!interfaceRegist">
            <p>以黑盒形式，通过模型在线调用接口的方式注册模型</p>
          </div>
          <div class="content" v-show="interfaceRegist">
            <div class="content-item">
              <label>名称:</label>
              <div class="itemContainer">
                <el-input v-model="registInfo.name"></el-input>
              </div>
            </div>
            <div class="content-item">
              <label>描述:</label>
              <div class="itemContainer">
                <el-input v-model="registInfo.description"></el-input>
              </div>
            </div>
            <div class="content-item">
              <label>是否公开:</label>
              <div class="itemContainer">
                <el-switch
                  v-model="registInfo.public"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </div>
            </div>
            <div class="content-item">
              <label>接口文档:</label>
              <div class="itemContainer"></div>
            </div>
            <div class="content-item" style="text-align: center">
              <!-- <label></label> -->
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text" style="font-size: 14px">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="btnGroup">
            <button
              v-show="!interfaceRegist"
              @click="interfaceRegist = !interfaceRegist"
            >
              详情
            </button>
            <button
              v-show="interfaceRegist"
              @click="interfaceRegist = !interfaceRegist"
            >
              注册
            </button>
          </div>
        </div>
        <div class="RegistionCard-item">
          <div class="title">
            <i class="fa-solid fa-cubes"></i>
            <span>部署包注册</span>
          </div>
          <div class="content">
            <p>以封装形式，将模型封装成标准化部署包进行注册</p>
          </div>
          <div class="btnGroup">
            <button>详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { config } from "../../plugins/config.js";
import "../../assets/css/userspacemodels.css";
import axios from "axios";
export default {
  data() {
    return {
      ip: config.ip,
      useInfo: JSON.parse(localStorage.getItem("user")),
      input: "",
      showRegistionCard: false,
      modelList: [
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
      ],
      registInfo: {
        name: "",
        description: "",
        public: false,
      },
      interfaceRegist: false,
      packageRegist: false,
    };
  },
  methods: {
    readmore(index) {
      // 点击卡片显示更过
      // let des = document.getElementById(index);
      // des.style.overflowY = "auto";
      // console.log("haha");
    },
    modelRegister() {
      this.showRegistionCard = !this.showRegistionCard;
    },
  },
  mounted() {
    const _this = this;
    _this.modelList = [];
    axios.post(config.ip + "getModelsbyUser", this.useInfo).then((resp) => {
      let respData = resp.data;

      for (let index = 0; index < respData.length; index++) {
        respData[index].img = _this.ip + respData[index].img;
      }
      _this.modelList = respData;
      // console.log(resp.data);
    });
  },
};
</script>